// 导入：类型、接口、模块、组件、样式
import { Component } from "react";
interface Props {}
interface State {}
class Index extends Component<Props, State> {
  state = {
    // 情况1：
    users: ["猪八戒", "沙师弟", "悟空"],
    // 情况2
    orders: [
      { id: 1, price: 1.11 },
      { id: 2, price: 2.65 },
      { id: 3, price: 3.54 },
    ],
  };

  render() {
    const { users, orders } = this.state;

    return (
      <fieldset>
        <legend>12-列表循环</legend>

        <ul>
          {orders.map((item, i) => {
            return (
              <li>
                {item.id} {item.price}
              </li>
            );
          })}
        </ul>

        {/* 
            [
                '<li>猪八戒</li>',
                '<li>沙师弟</li>',
                '<li>悟空</li>',
            ]
        */}
        <ul>
          {/* {[<li>1</li>, <li>2</li>, <li>3</li>]} */}

          {users.map((item, i) => {
            return <li>{item}</li>;
          })}
        </ul>
      </fieldset>
    );
  }
}
export default Index;

// const tmp = [11, 22, 33];
// const newarr1 = tmp.map((item, i) => {
//   // 第1次  把item=11  i=0    执行函数体里面的代码  newarr1.push(return数据6)
//   // 第2次  把item=22 i=1   执行函数体里面的代码 newarr1.push(return数据6)
//   // 第3次  把item=3 i=2   执行函数体里面的代码 newarr1.push(return数据6)
//   // 第4次  退出
//   return 6;
// });
// // newarr1   [6, 6, 6]

// const newarr2 = tmp.map((item, i) => {
//   // 第1次  把item=11  i=0    执行函数体里面的代码  newarr1.push(return undefined)
//   // 第2次  把item=22 i=1   执行函数体里面的代码 newarr1.push(return数据6)
//   // 第3次  把item=3 i=2   执行函数体里面的代码 newarr1.push(return undefined)
//   // 第4次  退出
//   if (i === 1) return 6;
//   return undefined;
// });
// // newarr2 [undefined, 6, undefined]
// console.log(newarr1);
// console.log(newarr2);

// const newarr3 = tmp.map((item, i) => {
//   return <h1>6</h1>;
// });
// // newarr3 [<h1>6</h1>, <h1>6</h1>, <h1>6</h1>]
